<template>
    <div class="custom-dropdown">

        <Popover trigger="click" v-model="isOpen" @visible-change="handleVisibleChange" position="bottom"
            :showArrow="false" customClass="dropdown-popover" :width="dropdownWidth">
            <template #reference>
                <div class="dropdown-selector" @click="toggleDropdown" ref="selectorRef">
                    <span class="selected-value">{{ selectedOption.label }}</span>
                    <span class="dropdown-arrow" :class="{ 'dropdown-arrow-rotate': isOpen }"
                        v-html="MENU_ARROW_UP_ICON">
                    </span>
                </div>
            </template>
            <div class="dropdown-options">
                <div v-for="option in options" :key="option.value" class="dropdown-option"
                    :class="{ 'dropdown-option-selected': option.value === modelValue }" @click="selectOption(option)">
                    {{ option.label }}
                </div>
            </div>
        </Popover>
    </div>
</template>

<script setup>

import { ref, computed, watch, onMounted } from 'vue';
import Popover from './Popover.vue';
import { MENU_ARROW_UP_ICON } from '@/constants/svg.js'
const props = defineProps({
    modelValue: {
        type: [String, Number],
        required: true
    },
    options: {
        type: Array,
        required: true,
        // 每个选项应该有 {label, value} 结构
        default: () => []
    },
    placeholder: {
        type: String,
        default: '请选择'
    }
});

const emit = defineEmits(['update:modelValue', 'change']);

const isOpen = ref(false);
const selectorRef = ref(null);
const dropdownWidth = ref('auto');

// 计算当前选中的选项
const selectedOption = computed(() => {
    const found = props.options.find(option => option.value === props.modelValue);
    return found || { label: props.placeholder, value: '' };
});

// 在组件挂载时初始化宽度
onMounted(() => {
    updateDropdownWidth();
});

// 更新下拉菜单宽度
const updateDropdownWidth = () => {
    if (selectorRef.value) {
        const width = selectorRef.value.offsetWidth;
        dropdownWidth.value = `${width}px`;
    }
};

// 切换下拉菜单的显示状态
const toggleDropdown = () => {
    updateDropdownWidth();
    // 不再手动切换isOpen状态，由Popover组件的handleReferenceClick处理
};

// 处理Popover组件的可见性变化
const handleVisibleChange = (visible) => {
    isOpen.value = visible;
};

// 选择选项
const selectOption = (option) => {
    emit('update:modelValue', option.value);
    emit('change', option.value);
    isOpen.value = false;
    // 手动触发可见性变化事件，确保 Popover 组件关闭
    handleVisibleChange(false);
};

// 监听modelValue变化
watch(() => props.modelValue, (newValue) => {
    // 可以在这里添加额外的逻辑
});

// 点击外部关闭下拉菜单
onMounted(() => {
    // Popover组件已经处理了点击外部关闭的逻辑
});
</script>

<style lang="scss">
.custom-popover .custom-popover-reference {
    width: 100%;
}

.dropdown-arrow {

    svg {
        position: relative;
        top: 2px;
    }
}

.dropdown-popover {
    padding: 6px 0 !important;
    margin: 0;
}
</style>
<style scoped lang="scss">
.custom-dropdown {
    position: relative;
    width: 100%;
    font-size: 14px;
}

.dropdown-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 15px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.dropdown-selector:hover {
    border-color: #C0C4CC;
}

.dropdown-arrow {
    color: #999;
    line-height: 32px;
    transition: transform 0.3s;
    display: inline-block;

}

.dropdown-arrow-rotate {
    transform: rotate(180deg);
}

.dropdown-reference {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.dropdown-options {
    width: 100%;
    min-width: 120px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.dropdown-option {
    cursor: pointer;
    height: 34px;
    line-height: 34px;
    padding: 0 20px;
    transition: background-color 0.3s;
}

.dropdown-option:hover {
    background-color: #f5f5f5;
}

.dropdown-option-selected {
    color: var(--theme-color);
    font-weight: 500;
    background-color: rgba(var(--theme-color-base), 0.1);
}
</style>